<template>
  <div>
    <img src="../../../src/assets/img/login/bgimg.jpg" height="100%" width="100%" class="bgimg">
    <el-row class="headerTop">
      <el-col :span="14" :offset="3">
        <p class="headTitleText"><span>{{headTitleText}}</span><span id="time"></span></p>
      </el-col>
    </el-row>
    <div id="Content">
      <div id="UserRegisterContent">
        <el-row class="regiterTitel">
          <el-col :span="3" :offset="4">
            <img src="../../../src/assets/img/home/logo.png" height="130%" width="110%">
          </el-col>
          <el-col :span="16" :offset="1">
            <el-row>
              <el-col :span="24">
                <div class="contentTitle">
                  <h1>{{contentTitle1}}</h1>
                  <h1>{{contentTitle2}}</h1>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="regiterContent">
          <el-col :span="18" :offset="3">
            <div class="formInput">
              <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="accountNumber">
                  <el-input type="text" v-model="registerForm.accountNumber" auto-complete="off"
                            placeholder="请输入手机号/邮箱">
                    <p slot="append" v-on:click="addDomain()" style="font-size:10px;cursor:pointer;color:#20a0ff;"
                       v-if="showBtn ===true">
                      {{verifyCodeNumber}}
                    </p>
                    <p v-else slot="append" style="font-size:10px;cursor:pointer;color:#20a0ff;">
                      重新发送{{CountdownNum}}s
                    </p>
                  </el-input>
                </el-form-item>
                <el-form-item prop="verifyCode">
                  <el-input type="text" v-model="registerForm.verifyCode" auto-complete="off"
                            placeholder="验证码"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                  <el-input type="password" v-model="registerForm.pass" auto-complete="off"
                            placeholder="输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                  <el-input type="password" v-model="registerForm.checkPass" auto-complete="off"
                            placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item prop="agree">
                  <template>
                    <el-checkbox v-model="registerForm.checked" class="agree">
                      <span>我已阅读并同意</span><span>《科技城高级人才协议》</span>
                    </el-checkbox>
                  </template>
                </el-form-item>
                <el-form-item class="btnForm">
                  <el-row :gutter="20">
                    <el-col :span="10" :offset="2">
                      <el-button type="primary" @click="touserEntry()">返回</el-button>
                    </el-col>
                    <el-col :span="10">
                      <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    </el-row>
    <el-row class="copyright">
      <el-col :span="8" :offset="8">
        <div class="grid-content bg-purple-dark">
          <span>版权所有：绵阳市人才管理中心咨询电话：0816-1234567 技术支持：绵阳市人才管理中心 地址：四川省绵阳</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../src/assets/js/post.js'

  export default {
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.registerForm.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号/邮箱'))
        } else if (value.indexOf('@') < 0) {
          if (value.length != 11) {
            callback(new Error('输入手机号码格式错误！'))
          } else {
            this.accountType = 0
          }
        } else {
          this.accountType = 1
        }
      }
      return {
        radio: 1,
        accountType: '',
        verifyCodeNumber: '获取验证码',
        clickNum: 0,
        CountdownNum: 60,
        showBtn: true,//显示btn
        headTitleText: '中国国际人才市场国家科技城（绵阳）分市场',
        contentTitle1: '中国国际人才市场',
        contentTitle2: '国家科技城（绵阳）分市场',
        registerForm: {
          accountNumber: '',
          verifyCode: '',
          pass: '',
          checkPass: '',
          checked: false,
        },
        rules: {
          accountNumber: [
            {validator: validatePass3, trigger: 'blur'}
          ],
          verifyCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
          agree: [
            {required: false, message: '请勾选协议', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      open (type, message) {
        this.$message({
          type: type,
          message: message
        })
      },
      touserEntry () {
        this.$router.push({path: '/UserEntry'})
      },
      //倒计时
      Countdown () {
        if (this.CountdownNum === 0) {
          this.showBtn = true
          this.CountdownNum = 60
          return
        } else {
          this.CountdownNum--
        }
        setTimeout(() => {this.Countdown()}, 1000)
      },
      submitForm () {
        var jsSHA = require('jssha')
        var shaObj = new jsSHA('SHA-256', 'TEXT')
        shaObj.update(this.registerForm.pass)
        var hash = shaObj.getHash('HEX')
        var _this = this
        var userParam1 = new Object()
        userParam1.user_account = _this.registerForm.accountNumber
        userParam1.user_password = hash
        userParam1.verifiy_code = _this.registerForm.verifyCode
        postDataToServer('USER_REGISTER', userParam1).then(function (data) {
          if (data.status == 0) {
            _this.open('success', '注册成功')
            _this.registerForm = ''
            _this.$router.push({path: '/UserEntry'})
            localStorage.setItem('userType', _this.radio)

          } else {
            _this.open('warning', data.message)
          }
        })
      },
      addDomain () {
        this.clickNum++
        if (this.clickNum > 1) {
          this.open('warning', '您的操作过于频繁，请稍后再试！')
          return
        }
        if (this.registerForm.accountNumber != '') {
          var _this = this
          var userParam2 = new Object()
          userParam2.bind_account = this.registerForm.accountNumber
          userParam2.account_type = this.accountType,
            userParam2.verify_type = '0',
            postDataToServer('CAPCHA_GET', userParam2).then(function (data) {
              _this.clickNum = 0
              if (data.status === 0) {
                _this.open('success', '获取验证码成功！')
                _this.showBtn = false
                _this.Countdown()
                _this.m = true
              } else {
                _this.open('warning', data.message)
              }
            }).catch((e) => {
              _this.clickNum = 0
            })
        } else {
          this.open('warning', '未输入手机号/邮箱')
        }
      },
      center () {
        var QWidth = document.getElementById('Content').clientWidth
        var QHeight = document.getElementById('Content').clientHeight
        var width = document.body.clientWidth
        var margin = (width - QWidth) / 2
        document.getElementById('Content').style.marginLeft = margin + 'px'
      }
    },
    mounted () {
      this.center()
    }
  }
</script>

<style scoped>
  body {
    margin: 0;
  }

  .headerTop {
    background-color: #105ab9;
    height: 3em;
    color: white;
    font-size: 10px;
  }

  .headTitleText {
    vertical-align: middle;
    display: table-cell;
    height: 3em;
  }

  .bgimg {
    position: absolute;
    top: 0;
    bottom: 0;
    filter: blur(0px);
    z-index: -1;
  }

  #Content {
    width: 400px;
    background: white;
    z-index: 100;
  }

  #UserRegisterContent {
    background-color: white;
    margin-top: 4em;
    box-shadow: 5px 10px 10px #373737;
  }

  #UserRegisterContent img {
    margin-top: 0.3em;
  }

  .registerForm {
    margin-top: 1em;
    border-top: 1px solid #105ab9;
  }

  .contentTitle h1 {
    font-size: 1em;
    height: 1.5em;
    line-height: 1.5em;
  }

  .regiterTitel {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .regiterContent {
    width: 400px;
    padding-top: 1em;
    border-top: 1px solid #105ab9;
  }

  .agree span {
    font-size: 0.9em;
  }

  .btnForm button {
    width: 100%;
  }

  .copyright span {
    position: fixed;
    bottom: 1%;
    left: 28%;
    font-size: 12px;
    color: white;
  }
</style>
